<template>
  <div class="app-container">

    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">

      <el-form-item label="操作时间">
        <el-date-picker
          v-model="dateRange"
          style="width: 240px"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['00:00:00', '23:59:59']"
        ></el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<!--        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>-->
      </el-form-item>
    </el-form>

    <div class="graph-title">
        用户操作统计曲线
    </div>

    <ve-line :data="chartData" :legend="legend" class="graph-body"></ve-line>

  </div>
</template>

<script>


import {curveData} from "@/api/snowRemoving/operstatistics";

export default {

  data() {
    return {
      // 日期范围
      dateRange: [],
      // 显示搜索条件
      showSearch: true,
      // 查询参数
      queryParams: {},
      //曲线数据
      desMetrics: 1,

      chartData:{
        columns: [], //'日期', '预测气象', '气象感知','事件处置'
        rows: [
          // { '日期': '2018-05-22', '预测气象': 50, '气象感知': 33,'事件处置':23 },
          // { '日期': '2018-05-23', '预测气象': 52, '气象感知': 12, '事件处置':15},
          // { '日期': '2018-05-24', '预测气象': 99, '气象感知': 33, '事件处置':11 }
        ]
      },

      legend: {
        selected:
          { //在这里设置就ok了
            // '事件处置': false,
            // '公里级预测': false,
            // '实况气象(wechat)':false,
            // '巡查记录':false,
            // "气象事件(wechat)": false,
            // "气象感知": true,
            // "能见度查询": false,
            // "视频巡查": false,
            // "视频查看(wechat)": false,
            // "设备检测": false,
            // "设备管理": false,
            // "预测气象": false,
            // "预测气象(wechat)": false
          }

      },

    };
  },
  created() {
     this.getList();
  },
  methods: {

    /** 搜索按钮操作 */
    handleQuery() {
      this.getList();
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },


    /** 查询操作统计数据 */
    getList() {
      curveData(this.addDateRange(this.queryParams,this.dateRange)).then(response => {

        this.chartData.columns = response.columns
        this.legend.selected =response.selected[0]
        this.chartData.rows = response.rows

      });
    },


  }
};
</script>

<style  lang="scss" scoped>

.graph-title{

  font-size: 25px;
  color: rgb(41, 18, 18);
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 30px;

}

.graph-body{

  margin-top: 50px;
}



</style>
